<template>
  <!-- 教师端问题管理页面 -->
  <div>
    <!-- 顶部的5个按钮 -->
    <div class="top-btn">
      <el-button type="primary" @click="openAdd">
        <i class="el-icon-plus"></i>
        新建
      </el-button>
      <el-button type="primary" @click="reload">
        <i class="el-icon-refresh-right"></i>
        全量刷新
      </el-button>
      <el-button type="primary">
        <i class="el-icon-bottom"></i>
        文件下载
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="float: right"
        @click="openSearch"
        >搜索</el-button
      >
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
        :limit="3"
      >
        <!-- :on-preview="handlePreview"
           :on-remove="handleRemove" 
           :before-remove="beforeRemove"
           :on-exceed="handleExceed"
           :file-list="fileList"
           上面标签里的-->

        <el-button type="primary"
          ><i class="el-icon-upload el-icon--right"></i>文件上传</el-button
        >
      </el-upload>
    </div>

    <!-- 展示表格 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      border
      style="width: 96%; margin-top: 20px"
    >
      <el-table-column type="index" width="50" label="序号">
      </el-table-column>
      <el-table-column prop="questionName" label="题干"></el-table-column>
      <el-table-column prop="questionParse" label="解析"> </el-table-column>
      <el-table-column prop="questionScore" label="分数" width="60">
      </el-table-column>
      <el-table-column prop="questionCreator" label="创建人"> </el-table-column>
      <el-table-column prop="questionLevel" label="难度" width="60">
      </el-table-column>
      <el-table-column prop="questionType" label="题型"> </el-table-column>
      <el-table-column prop="questionCategory" label="学科"> </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="155">
      </el-table-column>
      <el-table-column prop="caozuo" label="操作" width="255">
        <template slot-scope="scope">
          <el-button size="medium" type="success" plain @click="openDetail"
            >详情</el-button
          >
          <el-button size="medium" type="primary" plain @click="openEdit"
            >编辑</el-button
          >

          <el-button
            size="medium"
            type="danger"
            plain
            @click="remove(scope.row)"
            >删除</el-button
          ></template
        >
      </el-table-column>
    </el-table>

    <!-- 高级检索框 -->
    <el-dialog title="搜索" :visible.sync="isSearch" width="50%">
      <!-- :data="tableDataEnd.slice((currentPage-1)*pagesize,currentPage*pagesize)"> -->
      <el-form :model="form" :inline="true">
        <el-form-item label="序 号：">
          <el-input v-model="form.id" placeholder="请输入序号"></el-input>
        </el-form-item>
        <el-form-item label="分 数：">
          <el-input v-model="form.fenshu" placeholder="请输入分数"></el-input>
        </el-form-item>
        <el-form-item label="难 度：">
          <el-input v-model="form.tigan" placeholder="请输入题干"></el-input>
        </el-form-item>
        <el-form-item label="题 型：">
          <el-input v-model="form.jiexi" placeholder="请输入解析"></el-input>
        </el-form-item>
        <el-form-item label="学科：">
          <el-input v-model="form.nandu" placeholder="请输入难度"></el-input>
        </el-form-item>
        <!-- <el-form-item label="题 型：">
          <el-input v-model="form.tixing" placeholder="请输入题型"></el-input>
        </el-form-item>
        <el-form-item label="学 科：">
          <el-input v-model="form.xueke" placeholder="请输入学科"></el-input>
        </el-form-item>
        <el-form-item label="创建人：">
          <el-input
            v-model="form.chuangjianren"
            placeholder="请输入创建人"
          ></el-input>
        </el-form-item>
        <el-form-item label="更新时间：">
          <el-date-picker
            v-model="form.shijian"
            type="datetime"
            placeholder="请选择更新时间"
          >
          </el-date-picker>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="info" plain @click="isSearch = false"
          >取 消</el-button
        >
        <el-button
          size="medium"
          type="primary"
          plain
          @click="searchBegin(), (isSearch = false)"
          >搜 索</el-button
        >
      </div>
    </el-dialog>

    <!-- 题目详情框 -->
    <el-dialog title="题目详情" :visible.sync="isDetail" width="50%">
      <el-divider></el-divider>
      <div class="detail">
        <h2>题干：</h2>
        <p>这是题干的插值{{}}</p>
        <h2>选项：</h2>
        <ul>
          <li>这是第一个选项的插值{{}}</li>
          <li>这是第二个选项的插值{{}}</li>
          <li>这是第三个选项的插值{{}}</li>
          <li>这是第四个选项的插值{{}}</li>
        </ul>
        <h2>答案：</h2>
        <ul>
          <li>这是第一个选项的答案</li>
          <li>这是第二个选项的答案</li>
          <li>这是第三个选项的答案</li>
          <li>这是第四个选项的答案</li>
        </ul>
        <h2>解析：</h2>
        <p>这是一条解析</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="info" plain @click="isDetail = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>

    <!-- 题目编辑框 -->
    <el-dialog title="题目编辑" :visible.sync="isEdit" width="50%">
      <el-divider></el-divider>
      <div class="detail">
        <h2>题干：</h2>
        <div id="div1">
          <quill-editor
            v-model="content2"
            :options="editorOption"
            style="height: 200px; margin-bottom: 80px"
          ></quill-editor>
        </div>
        <h2>选项：</h2>
        <ul>
          <li>A.{{}}</li>
          <li>B.{{}}</li>
          <li>C.{{}}</li>
          <li>D.{{}}</li>
        </ul>
        <h2>答案：</h2>
        <ul>
          <li>E.{{ 1 }}{{ 2 }}</li>
        </ul>
        <h2>解析：</h2>
        <div id="div2">
          <quill-editor
            v-model="content2"
            :options="editorOption"
            style="height: 200px; margin-bottom: 50px"
          ></quill-editor>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="info" plain @click="isEdit = false"
          >关 闭</el-button
        >
        <el-button size="medium" type="success" plain @click="isEdit = false"
          >更 新</el-button
        >
      </span>
    </el-dialog>

    <!-- 新建题目框 -->
    <el-dialog title="创建问题" :visible.sync="isAdd" width="50%">
      <div class="detail">
        <el-steps :active="active" finish-status="success">
          <el-step title="问题内容"></el-step>
          <el-step title="问题分类"></el-step>
          <el-step title="问题选项"></el-step>
        </el-steps>
        <el-divider></el-divider>
        <div v-if="active === 0">
          <h3>题干：</h3>
          <div id="div3">
            <quill-editor
              ref="myTextEditor"
              v-model="form.timu"
              :options="editorOption"
              style="height: 200px; margin-bottom: 100px"
              >asjkdhjkshdkahd</quill-editor
            >
          </div>
          <h3>解析：</h3>
          <div id="div4">
            <quill-editor
              v-model="content2"
              :options="editorOption"
              style="height: 200px; margin-bottom: 80px"
            ></quill-editor>
          </div>
          <div
            slot="footer"
            class="dialog-footer"
            style="margin-top: 20px; height: 30px"
          >
            <el-button
              size="medium"
              type="success"
              plain
              @click="next"
              style="float: right; margin-left: 15px"
              >下一步</el-button
            >
            <el-button
              size="medium"
              type="info"
              plain
              @click="isAdd = false"
              style="float: right"
              >取 消</el-button
            >
          </div>
        </div>
        <div v-if="active === 1">
          <el-form
            :rules="rules"
            :model="ruleForm"
            ref="ruleForm"
            :inline="true"
          >
            <el-form-item label="题 目：" style="margin-left: 10px">
              <div>
                <el-input v-html="form.timu" :disabled="true"></el-input>
              </div>
            </el-form-item>
            <br />
            <el-form-item label="题 型：" prop="tixing">
              <el-select v-model="ruleForm.tixing" placeholder="请选择题型">
                <!-- @change="towerChange"上面标签的 -->
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <br />
            <el-form-item label="归 类：" prop="guilei">
              <el-select v-model="ruleForm.guilei" placeholder="请选择分类">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <br />
            <el-form-item label="难 度：" prop="nandu">
              <el-select v-model="ruleForm.nandu" placeholder="请选择难度">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
            style="margin-top: 20px; height: 30px"
          >
            <el-button
              size="medium"
              type="success"
              plain
              @click="submitForm('ruleForm'), next1()"
              style="float: right; margin-left: 15px"
              >下一步</el-button
            >
            <el-button
              size="medium"
              type="info"
              plain
              @click="(isAdd = false), (active = 0)"
              style="float: right"
              >取 消</el-button
            >
            <el-button
              size="medium"
              type="primary"
              plain
              @click="prev"
              style="float: left"
              >上一步</el-button
            >
          </div>
        </div>
        <div v-if="active === 2">
          <el-form
            :rules="rules"
            :model="ruleForm1"
            ref="ruleForm1"
            :inline="true"
          >
            <el-form-item label="题  目：" style="margin-left: 35px">
              <el-input v-html="form.timu" :disabled="true"></el-input>
            </el-form-item>
            <br />
            <template v-if="bianliang1 == true">
              <div style="margin-top: 10px">
                <el-radio v-model="radio" label="1" style="margin-left: 20px"
                  >A.</el-radio
                ><input type="text" style="width: 60%; height: 30px" />
              </div>
              <div style="margin-top: 10px">
                <el-radio v-model="radio" label="2" style="margin-left: 20px"
                  >B.</el-radio
                ><input type="text" style="width: 60%; height: 30px" />
              </div>
              <div style="margin-top: 10px">
                <el-radio v-model="radio" label="3" style="margin-left: 20px"
                  >C.</el-radio
                ><input type="text" style="width: 60%; height: 30px" />
              </div>
              <div style="margin-top: 10px">
                <el-radio v-model="radio" label="4" style="margin-left: 20px"
                  >D.</el-radio
                ><input type="text" style="width: 60%; height: 30px" />
              </div>
            </template>
            <template v-if="bianliang2 == true">
              <el-checkbox-group v-model="checkList">
                <div style="margin-top: 10px">
                  <el-checkbox label="1">A.</el-checkbox
                  ><input
                    type="text"
                    style="width: 60%; height: 30px; margin-left: 20px"
                  />
                </div>
                <div style="margin-top: 10px">
                  <el-checkbox label="2">B.</el-checkbox
                  ><input
                    type="text"
                    style="width: 60%; height: 30px; margin-left: 20px"
                  />
                </div>
                <div style="margin-top: 10px">
                  <el-checkbox label="3">C.</el-checkbox
                  ><input
                    type="text"
                    style="width: 60%; height: 30px; margin-left: 20px"
                  />
                </div>
                <div style="margin-top: 10px">
                  <el-checkbox label="4">D.</el-checkbox
                  ><input
                    type="text"
                    style="width: 60%; height: 30px; margin-left: 20px"
                  />
                </div>
              </el-checkbox-group>
            </template>
            <template v-if="bianliang3 == true">
              <div style="margin-top: 10px">
                <el-radio v-model="radio" label="1" style="margin-left: 20px"
                  >A.</el-radio
                ><input type="text" style="width: 60%; height: 30px" />
              </div>
              <div style="margin-top: 10px">
                <el-radio v-model="radio" label="2" style="margin-left: 20px"
                  >B.</el-radio
                ><input type="text" style="width: 60%; height: 30px" />
              </div>
            </template>
          </el-form>
          <div
            slot="footer"
            class="dialog-footer"
            style="margin-top: 20px; height: 30px"
          >
            <el-button
              size="medium"
              type="success"
              plain
              @click="submitForm1('ruleForm1'), (active = 0)"
              style="float: right; margin-left: 15px"
              >完成</el-button
            >
            <el-button
              size="medium"
              type="info"
              plain
              @click="(isAdd = false), (active = 0)"
              style="float: right"
              >取 消</el-button
            >
            <el-button
              size="medium"
              type="primary"
              plain
              @click="prev"
              style="float: left"
              >上一步</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <div class="footer">
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
  <script>
// 组件中引入vue-quill-editor
// editor.vue
import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import allApis from "@/request/index";

export default {
  name: "problem",
  components: {
    quillEditor,
  },
  data() {
    return {
      checkList: [],
      radio: "",
      //用来控制v-if的显隐本
      bianliang1: false,
      bianliang2: false,
      bianliang3: false,
      content1: "",
      content2: "",
      //富文本编辑框工具栏
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗 斜体 下划线 删除线
            [
              {
                color: [],
              },
              {
                background: [],
              },
            ], // 字体颜色、字体背景颜色
            [
              {
                font: [],
              },
            ], //显示字体选择
            [
              {
                list: "ordered",
              },
              {
                list: "bullet",
              },
            ], //有序 无序列表
            [
              {
                align: [],
              },
            ], //对齐方式
            [
              {
                size: [],
              },
            ], //字号
            [
              {
                script: "sub",
              },
              {
                script: "super",
              },
            ], //上标 下标
          ],
        },
      },
      //当前页
      currentPage: 1,
      //一页展示的条数
      pagesize: 10,
      // 表格数据
      tableData: [],
      //搜索弹窗显隐
      isSearch: false,
      //详情弹窗显隐
      isDetail: false,
      //编辑弹窗显隐
      isEdit: false,
      //新建弹窗显隐
      isAdd: false,
      //步骤条的index
      active: 0,
      //表单
      form: {
        id: "",
        tigan: "",
        jiexi: "",
        fenshu: "",
        chuangjianren: "",
        nandu: "",
        tixing: "",
        xueke: "",
        shijian: "",
        guilei: "",
        xuanxiang: "",
        timu: "",
        timu1: "",
      },
      //新增第二步校验表单
      ruleForm: {
        tixing: "",
        guilei: "",
        nandu: "",
      },
      //新增第三步校验表单
      ruleForm1: {
        xuanxiang: "",
        daan: "",
      },
      //题型下拉框选项
      options1: [
        {
          value: "选项1",
          label: "单选题",
        },
        {
          value: "选项2",
          label: "多选题",
        },
        {
          value: "选项3",
          label: "判断题",
        },
      ],
      //归类下拉框选项
      options2: [
        {
          value: "选项1",
          label: "SQL",
        },
        {
          value: "选项2",
          label: "Java基础",
        },
        {
          value: "选项3",
          label: "Java进阶",
        },
        {
          value: "选项4",
          label: "Web前端",
        },
        {
          value: "选项5",
          label: "框架",
        },
        {
          value: "选项6",
          label: "数据结构",
        },
      ],
      //难度下拉框选项
      options3: [
        {
          value: "选项1",
          label: "易",
        },
        {
          value: "选项2",
          label: "中",
        },
        {
          value: "选项3",
          label: "难",
        },
      ],
      //答案下拉框选项
      // options4: [],
      //新增的校验
      rules: {
        //题型
        tixing: [
          {
            required: true,
            message: "请选择题型",
            trigger: "change",
          },
        ],
        //归类
        guilei: [
          {
            required: true,
            message: "请选择题目的分类",
            trigger: "change",
          },
        ],
        //难度
        nandu: [
          {
            required: true,
            message: "请选择题目的难度",
            trigger: "change",
          },
        ],
        //答案
        daan: [
          {
            required: true,
            message: "请选择题目的答案",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // created(){
  //   this.tableDataEnd = this.tableData;
  // },
  methods: {
    getTableData() {
      allApis.getTableList().then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    reload() {
      this.$router.go(0);
    },
    remove(row) {
      allApis.deleteTableData(row.questionId).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          // 成功时弹出提示信息
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$router.go(0);
          /* 删除成功后要刷新页面：
      1.要么在这里重新请求一次数据
      2.要么使用依赖注入，强制刷新页面 */
        } else {
          // 否则弹出删除错误
          this.$message({
            type: "error",
            message: "删除错误",
          });
        }
      });
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    //点击打开检索弹窗
    openSearch() {
      this.isSearch = true;
    },
    //点击打开详情弹窗
    openDetail() {
      this.isDetail = true;
    },
    //点击打开编辑弹窗
    openEdit() {
      this.isEdit = true;
    },
    //点击打开新增窗口
    openAdd() {
      this.isAdd = true;
    },
    //校验新增第二步的表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.active++;
        } else {
          return false;
        }
      });
    },
    next1() {
      if (this.ruleForm.tixing === "选项1") {
        this.bianliang1 = true;
      } else if (this.ruleForm.tixing === "选项2") {
        this.bianliang2 = true;
      } else if (this.ruleForm.tixing === "选项3") {
        this.bianliang3 = true;
      }
    },

    // 问题搜搜
    searchBegin() {
      allApis
        .searchData(
          {
            questionName: this.form.id,
            questionScore: this.form.fenshu,
            questionLevel: this.form.tigan,
            questionType: this.form.jiexi,
          },
          "",
          ""
        )
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            this.tableData = res.data.data;
          }
        });
    },
    //校验新增第三步的表单
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isAdd = false;
        } else {
          return false;
        }
      });
    },
    //下一页
    next(str) {
      if (this.active++ === 2) {
        this.isAdd = false;
      }
    },
    //上一页
    prev() {
      if (this.active > 0) this.active--;
      this.bianliang1 = false;
      this.bianliang2 = false;
      this.bianliang3 = false;
    },
    //点击新增答案选项
    addoption() {
      //向下拉选项添加数据
      this.options4.push(this.ruleForm1.xuanxiang);
      //提示消息
      this.$message({
        message: "新增成功",
        type: "success",
      });
      //清空输入框数据
      this.ruleForm1.xuanxiang = "";
    },
  },
  mounted() {
    this.getTableData();
  },
};
</script>
  
  <style scoped>
.top-btn {
  width: 96%;
}

.top-btn .el-button {
  float: left;
  margin-left: 40px;
  margin-top: 12px;
}
.top-btn .el-upload {
  float: left;
}
.el-table {
  margin: 20px auto;
}

.detail {
  text-align: left;
  margin-left: 30px;
}

.detail p,
ul {
  font-size: 16px;
}

.el-dialog {
  width: 800px;
}
/* 分页器样式 */
.footer {
  text-align: center;
  margin-top: 1%;
}
</style>